<script setup lang="ts">
import { reactive, ref } from "vue";
import { onLoad } from "@dcloudio/uni-app";
import { useQuery } from "@/hooks/init";
import {
  info_api,
  get_refund_rule_api,
} from "@/package/activity/api/guide_group_order";
import { Account } from "@/utils/account";
import { Router } from "@/utils/router";
import { Toast } from "@/utils/toast";

import DetailGroupState from "./components/detail-group-state.vue";
import DetailPriceItem from "./components/detail-price-item.vue";
import DetailRuleItem from "./components/detail-rule-item.vue";
import DetailRuleTable from "./components/detail-rule-table.vue";
import FormButton from "@/components/form/button.vue";
import PopupBottom from "@/components/popup/bottom.vue";
import FormCheckbox from "@/components/form/checkbox.vue";

onLoad((options) => {
  useQuery<{ id: string }>(options as MiniApp.AppLaunchOption, (query) => {
    tempData.id = query.id;
    reloadData();

    get_refund_rule_api({ id: query.id }).then((resp) => {
      infoData.initiator = resp.initiator;
      infoData.refund_rule =
        resp.refund_type === 1 ? resp.pin_refund_rule : resp.refund_rule;
      infoData.pin = resp.pin;
    });
  });
});

const reloadData = () => {
  return info_api({ id: tempData.id }).then((resp) => {
    infoData.type_str = resp.type_str;
    infoData.scenic_name = resp.scenic_name;
    infoData.avatar_url = resp.avatar_url;
    infoData.fullname = resp.fullname;
    infoData.area_str = resp.area_str;
    infoData.adult_allot_price = resp.adult_allot_price;
    infoData.is_include_ticket = resp.is_include_ticket;
    infoData.adult_ticket_price = resp.adult_ticket_price;
    infoData.group_status = resp.group_status;
    infoData.person_num = resp.person_num;
    infoData.need_person_num = resp.need_person_num;
    infoData.surplus_num = resp.surplus_num;
    infoData.end_str = resp.end_str;
    infoData.trip_date = resp.trip_date;
    infoData.session_str = resp.session_str;
    infoData.explain_start_time = resp.explain_start_time;
    infoData.min_person_num = resp.min_person_num;
    infoData.max_person_num = resp.max_person_num;
    infoData.hours = resp.hours;
    infoData.guider_type_name = resp.guider_type_name;
    infoData.server_count = resp.server_count;
    infoData.score = resp.score;
    infoData.last_comment = resp.last_comment;
    infoData.good_at = resp.good_at;
    infoData.speaker_scenic = resp.speaker_scenic;
    infoData.child_allot_price = resp.child_allot_price;
    infoData.is_include_child_ticket = resp.is_include_child_ticket;
    infoData.child_ticket_price = resp.child_ticket_price;
    infoData.old_allot_price = resp.old_allot_price;
    infoData.is_include_old_ticket = resp.is_include_old_ticket;
    infoData.old_ticket_price = resp.old_ticket_price;
    infoData.desc = resp.desc;
    // infoData.refund_rule = resp.refund_rule;
    infoData.allot_rule = resp.allot_rule;
    infoData.group_status = resp.group_status;
  });
};

const infoData = reactive({
  type_str: 1,
  scenic_name: "",
  avatar_url: "",
  fullname: "",
  area_str: "",
  adult_allot_price: "",
  is_include_ticket: 0,
  adult_ticket_price: "",
  group_status: 0,
  person_num: "",
  need_person_num: "",
  surplus_num: "",
  end_str: "",
  trip_date: "",
  session_str: "",
  explain_start_time: "",
  min_person_num: "",
  max_person_num: "",
  hours: "",
  guider_type_name: "",
  server_count: "",
  score: "",
  last_comment: "",
  good_at: "",
  speaker_scenic: "",
  child_allot_price: "",
  is_include_child_ticket: 0,
  child_ticket_price: "",
  old_allot_price: "",
  is_include_old_ticket: 0,
  old_ticket_price: "",
  desc: "",
  initiator: {} as any,
  refund_rule: [] as any[],
  pin: {} as any,
  allot_rule: "",
});

const btnClick = (index: number) => {
  if (index === -1) return (agreementVisible.value = true);

  if (!agreementIsCheck.value) return Toast.show("请先阅读并同意扣费规则说明");

  const fn = () => {
    Router.navigateTo("/package/activity/pages/dypt/order", (resp) => {
      resp.eventChannel.emit("ev-dypt-data", {
        id: tempData.id,
        max_person_num:
          Number(infoData.max_person_num) - Number(infoData.person_num),
        adult_allot_price: infoData.adult_allot_price,
        is_include_ticket: infoData.is_include_ticket,
        adult_ticket_price: infoData.adult_ticket_price,
        child_allot_price: infoData.child_allot_price,
        is_include_child_ticket: infoData.is_include_child_ticket,
        child_ticket_price: infoData.child_ticket_price,
        old_allot_price: infoData.old_allot_price,
        is_include_old_ticket: infoData.is_include_old_ticket,
        old_ticket_price: infoData.old_ticket_price,
      });

      agreementVisible.value = false;
    });
  };

  Account.isLogin
    ? fn()
    : Account.login(() => Router.navigateBack(1, () => fn()));
};

const agreementVisible = ref(false);
const agreementIsCheck = ref(false);

const tempData = { id: "" };
</script>

<template>
  <view class="detail-info">
    <view class="detail-info-wrapper">
      <view class="detail-info-scenic">
        <text class="detail-info-type">{{ infoData.type_str }}</text
        >{{ infoData.scenic_name }}
      </view>
      <view class="detail-info-content">
        <view
          style="display: flex; align-items: center; flex-grow: 1; min-width: 0"
        >
          <view class="detail-info-promoter">发起人：</view>
          <image
            class="detail-info-avatar"
            :src="infoData.avatar_url"
            mode="aspectFill"
          />
          <view class="detail-info-name">{{ infoData.fullname }}</view>
          <image
            class="detail-info-position"
            src="@/package/activity/static/dypt-detail-position.png"
          />
          <view class="detail-info-city">{{ infoData.area_str }}</view>
        </view>
        <view style="flex-shrink: 0">
          <view class="detail-info-price">
            <text class="detail-info-price2">￥</text
            >{{ infoData.adult_allot_price }}
          </view>
          <view class="detail-info-ticket">
            {{
              infoData.is_include_ticket === 1
                ? `含门票￥${infoData.adult_ticket_price}/人`
                : ""
            }}
          </view>
        </view>
      </view>
      <DetailGroupState
        :state="infoData.group_status"
        :num="infoData.person_num"
        :needNum="infoData.need_person_num"
        :surplusNum="infoData.surplus_num"
        :text="infoData.end_str"
      />
    </view>
  </view>

  <view class="detail-task">
    <view class="detail-task-title">任务明细</view>
    <view class="detail-task-item">
      <image
        class="detail-task-icon"
        src="@/package/activity/static/dypt-detail-task.png"
      />
      <view class="detail-task-label">出行日期：</view>
      <view class="detail-task-value">
        {{ infoData.trip_date }}&nbsp;{{ infoData.session_str }}&nbsp;{{
          infoData.explain_start_time
        }}
      </view>
    </view>
    <view class="detail-task-item">
      <image
        class="detail-task-icon"
        src="@/package/activity/static/dypt-detail-task2.png"
      />
      <view class="detail-task-label">成团人数：</view>
      <view class="detail-task-value">
        {{ infoData.min_person_num }}-{{ infoData.max_person_num }}人
      </view>
    </view>
    <view class="detail-task-item">
      <image
        class="detail-task-icon"
        src="@/package/activity/static/dypt-detail-task3.png"
      />
      <view class="detail-task-label">讲解时长：</view>
      <view class="detail-task-value">{{ infoData.hours }}小时</view>
    </view>
    <view class="detail-task-item">
      <image
        class="detail-task-icon"
        src="@/package/activity/static/dypt-detail-task4.png"
      />
      <view class="detail-task-label">讲解景点：</view>
      <view class="detail-task-value">{{ infoData.scenic_name }}</view>
    </view>
  </view>

  <view class="detail-guider">
    <view class="detail-guider-title">任务明细</view>
    <view class="detail-guider-wrapper">
      <image
        class="detail-guider-avatar"
        :src="infoData.avatar_url"
        mode="aspectFill"
      />
      <view style="flex-grow: 1; min-width: 0">
        <view class="detail-guider-name">{{ infoData.fullname }}</view>
        <view class="detail-guider-service">
          <text class="detail-guider-type" v-if="infoData.guider_type_name">{{
            infoData.guider_type_name
          }}</text
          >已服务{{ infoData.server_count }}次
        </view>
        <view style="display: flex; align-items: center">
          <view class="detail-guider-score">
            {{ infoData.score }}<text class="detail-guider-score2">分</text>
          </view>
          <view class="detail-guider-comment">
            {{ infoData.last_comment }}
          </view>
        </view>
        <view class="detail-guider-intro">{{ infoData.good_at }}</view>
        <view class="detail-guider-scenic">
          <text class="detail-guider-scenic2">擅长讲解的景/博</text
          >{{ infoData.speaker_scenic }}
        </view>
      </view>
    </view>
  </view>

  <view class="detail-price">
    <view class="detail-price-title">结算价</view>
    <view class="detail-price-item">
      <DetailPriceItem
        :info="{
          title: '成人',
          price: infoData.adult_allot_price,
          desc: '18周岁(含)~59周岁(含)',
          ticket:
            infoData.is_include_ticket === 1
              ? `含门票￥${infoData.adult_ticket_price}/人`
              : '',
        }"
      />
    </view>
    <view class="detail-price-line"></view>
    <view class="detail-price-item">
      <DetailPriceItem
        :info="{
          title: '儿童',
          price: infoData.child_allot_price,
          desc: '17周岁(含)以下',
          ticket:
            infoData.is_include_child_ticket === 1
              ? `含门票￥${infoData.child_ticket_price}/人`
              : '',
        }"
      />
    </view>
    <view class="detail-price-line"></view>
    <view class="detail-price-item">
      <DetailPriceItem
        :info="{
          title: '老人',
          price: infoData.old_allot_price,
          desc: '60周岁(含)以上',
          ticket:
            infoData.is_include_old_ticket === 1
              ? `含门票￥${infoData.old_ticket_price}/人`
              : '',
        }"
      />
    </view>
  </view>

  <view class="detail-intro">
    <view class="detail-intro-title">拼团详情</view>
    <view class="detail-intro-content">{{ infoData.desc }}</view>
  </view>

  <view class="detail-rule">
    <view class="detail-rule-title">
      退改规则<text style="color: #e02020">*</text>
    </view>
    <view class="detail-rule-item">
      <DetailRuleItem :info="infoData.pin">
        <view class="detail-rule-table">
          <DetailRuleTable :listData="infoData.refund_rule" />
        </view>
      </DetailRuleItem>
    </view>
    <view class="detail-rule-item">
      <DetailRuleItem :info="infoData.initiator" />
    </view>
  </view>

  <view class="detail-intro">
    <view class="detail-intro-title">结算规则</view>
    <view class="detail-intro-content">{{ infoData.allot_rule }}</view>
  </view>

  <view class="detail-btn">
    <view @click="btnClick(-1)">
      <FormButton>一键拼单</FormButton>
    </view>
  </view>

  <PopupBottom v-model="agreementVisible" title="拼单前请先阅读并同意扣费规则">
    <view class="detail-agreement">
      <scroll-view class="detail-agreement-wrapper" scroll-y>
        <view class="detail-agreement-title">
          退改规则<text style="color: #e02020">*</text>
        </view>
        <view class="detail-agreement-item">
          <DetailRuleItem :info="infoData.initiator">
            <view class="detail-agreement-table">
              <DetailRuleTable :listData="infoData.refund_rule" />
            </view>
          </DetailRuleItem>
        </view>
        <view class="detail-agreement-item">
          <DetailRuleItem :info="infoData.pin" />
        </view>
      </scroll-view>
      <view class="detail-agreement-checkbox">
        <FormCheckbox
          v-model="agreementIsCheck"
        />&nbsp;已阅读并同意扣费规则说明
      </view>
      <view class="detail-agreement-btn" @click="btnClick">
        <FormButton :disabled="!agreementIsCheck">确认</FormButton>
      </view>
    </view>
  </PopupBottom>
</template>

<style lang="scss">
page {
  padding-bottom: calc(120rpx + env(safe-area-inset-bottom));
  background-color: #ffffff;
}

.detail-info {
  padding: 20rpx;
  background-color: #f9f9f9;

  .detail-info-wrapper {
    padding: 30rpx 20rpx;
    border-radius: 20rpx;
    background-color: #ffffff;
  }

  .detail-info-scenic {
    margin-bottom: 10rpx;
    font-size: 36rpx;
    color: #2d2d2d;
    line-height: 50rpx;
    font-weight: bold;
  }

  .detail-info-type {
    display: inline-block;
    padding: 0 10rpx;
    margin-right: 10rpx;
    margin-top: 10rpx;
    font-size: 20rpx;
    color: #8e5a1f;
    line-height: 32rpx;
    font-weight: 400;
    border-radius: 8rpx;
    background: linear-gradient(45deg, #fdecc7, #fed5b2);
    vertical-align: top;
  }

  .detail-info-content {
    display: flex;
    align-items: center;
    margin-bottom: 18rpx;
  }

  .detail-info-promoter {
    flex-shrink: 0;
    font-size: 24rpx;
    color: #999999;
  }

  .detail-info-avatar {
    flex-shrink: 0;
    width: 40rpx;
    height: 40rpx;
    border-radius: 50%;
  }

  .detail-info-name {
    min-width: 0;
    margin-left: 10rpx;
    font-size: 24rpx;
    color: #666666;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
  }

  .detail-info-position {
    flex-shrink: 0;
    width: 18rpx;
    height: 20rpx;
    margin-left: 40rpx;
  }

  .detail-info-city {
    flex-shrink: 0;
    margin-left: 6rpx;
    margin-right: 20rpx;
    font-size: 24rpx;
    color: #666666;
  }

  .detail-info-price {
    font-size: 40rpx;
    color: #fa6400;
    line-height: 52rpx;
    text-align: right;
    font-weight: bold;
  }

  .detail-info-price2 {
    font-size: 20rpx;
    line-height: 28rpx;
  }

  .detail-info-ticket {
    font-size: 20rpx;
    color: #666666;
    line-height: 24rpx;
    text-align: right;
  }
}

.detail-task {
  padding-top: 26rpx;
  padding-bottom: 18rpx;

  .detail-task-title {
    padding-left: 40rpx;
    margin-bottom: 24rpx;
    font-size: 36rpx;
    color: #333333;
    line-height: 50rpx;
    font-weight: bold;
  }

  .detail-task-item {
    display: flex;
    align-items: center;
    margin: 0 40rpx 20rpx;
  }

  .detail-task-icon {
    flex-shrink: 0;
    width: 28rpx;
    height: 28rpx;
  }

  .detail-task-label {
    flex-shrink: 0;
    margin-left: 10rpx;
    font-size: 28rpx;
    color: #666666;
    line-height: 40rpx;
    font-weight: bold;
  }

  .detail-task-value {
    min-width: 0;
    font-size: 28rpx;
    color: #666666;
    line-height: 40rpx;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
  }
}

.detail-guider {
  margin-bottom: 26rpx;

  .detail-guider-title {
    padding-left: 40rpx;
    margin-bottom: 24rpx;
    font-size: 36rpx;
    color: #333333;
    line-height: 50rpx;
    font-weight: bold;
  }

  .detail-guider-wrapper {
    display: flex;
    align-items: flex-start;
    padding: 20rpx;
    margin: 0 30rpx;
    border-radius: 20rpx;
    background-color: #fff7ef;
  }

  .detail-guider-avatar {
    flex-shrink: 0;
    width: 150rpx;
    height: 222rpx;
    margin-right: 20rpx;
    border-radius: 20rpx;
  }

  .detail-guider-name {
    margin-bottom: 8rpx;
    font-size: 32rpx;
    color: #2d2d2d;
    line-height: 44rpx;
    font-weight: bold;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
  }

  .detail-guider-service {
    margin-bottom: 8rpx;
    font-size: 24rpx;
    color: #999999;
    line-height: 32rpx;
  }

  .detail-guider-type {
    display: inline-block;
    padding: 0 10rpx;
    margin-right: 10rpx;
    font-size: 20rpx;
    color: #ff5c1d;
    line-height: 32rpx;
    border-radius: 8rpx;
    background-color: rgba(255, 92, 29, 0.05);
    vertical-align: top;
  }

  .detail-guider-score {
    flex-shrink: 0;
    font-size: 28rpx;
    color: #0bc6b2;
    line-height: 40rpx;
    font-weight: bold;
  }

  .detail-guider-score2 {
    font-size: 24rpx;
    color: #0bc6b2;
    line-height: 34rpx;
    font-weight: 400;
  }

  .detail-guider-comment {
    flex-grow: 1;
    min-width: 0;
    margin-left: 4rpx;
    margin-top: 2rpx;
    font-size: 24rpx;
    color: #666666;
    line-height: 32rpx;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
  }

  .detail-guider-intro {
    margin-top: 26rpx;
    margin-bottom: 16rpx;
    font-size: 24rpx;
    color: #2d2d2d;
    line-height: 32rpx;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
  }

  .detail-guider-scenic {
    font-size: 24rpx;
    color: #666666;
    line-height: 46rpx;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
  }

  .detail-guider-scenic2 {
    display: inline-block;
    padding: 0 20rpx;
    margin-right: 6rpx;
    font-size: 24rpx;
    color: #666666;
    line-height: 46rpx;
    border-radius: 10rpx;
    background-color: #f5f5f5;
    vertical-align: top;
  }
}

.detail-price {
  margin-bottom: 56rpx;

  .detail-price-title {
    padding-left: 40rpx;
    margin-bottom: 42rpx;
    font-size: 36rpx;
    color: #333333;
    line-height: 50rpx;
    font-weight: bold;
  }

  .detail-price-item {
    padding: 0 40rpx;
  }

  .detail-price-line {
    margin: 28rpx 40rpx 18rpx;
    border-bottom: 2rpx solid #eeeeee;
  }
}

.detail-intro {
  margin-bottom: 26rpx;

  .detail-intro-title {
    padding-left: 30rpx;
    margin-bottom: 24rpx;
    font-size: 36rpx;
    color: #333333;
    line-height: 50rpx;
    font-weight: bold;
  }

  .detail-intro-content {
    margin: 0 30rpx;
    font-size: 28rpx;
    color: #666666;
    line-height: 48rpx;
    white-space: pre-line;
  }
}

.detail-rule {
  .detail-rule-title {
    padding-left: 30rpx;
    margin-bottom: 30rpx;
    font-size: 28rpx;
    color: #666666;
    line-height: 40rpx;
  }

  .detail-rule-item {
    margin: 0 30rpx 40rpx;
  }

  .detail-rule-table {
    margin-bottom: 20rpx;
  }
}

.detail-btn {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  height: 106rpx;
  padding: 14rpx 60rpx env(safe-area-inset-bottom);
  background-color: #ffffff;
}

.detail-agreement {
  padding-top: 20rpx;

  .detail-agreement-wrapper {
    max-height: 64vh;
  }

  .detail-agreement-title {
    padding-left: 30rpx;
    margin-bottom: 30rpx;
    font-size: 28rpx;
    color: #666666;
    line-height: 40rpx;
  }

  .detail-agreement-item {
    margin: 0 30rpx 40rpx;
  }

  .detail-agreement-table {
    margin-bottom: 20rpx;
  }

  .detail-agreement-checkbox {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 68rpx;
    font-size: 28rpx;
    color: #666666;
    line-height: 40rpx;
    background-color: #fff1e4;
  }

  .detail-agreement-btn {
    height: 106rpx;
    padding: 14rpx 60rpx 0;
  }
}
</style>